<template>
	<a-typography>
		<a-typography-title id="title" :heading="3">
			<!-- <a-menu mode="horizontal" :default-selected-keys="['1']" @menu-item-click="getMenuItem"
				style="text-align: center;">
				<a-menu-item key="1">
					<span>高达</span>
				</a-menu-item>
				<a-menu-item :key="index+2" v-for="(item,index) in typeMenuItem">
					<span>{{item}}</span>
				</a-menu-item>
			</a-menu> -->
		</a-typography-title>
	</a-typography>
	<a-layout-header>
		<div id="evaluating">
			<a-layout-header>
				<div id="evaluating-title">
					<a-typography>
						<a-typography-title id="description">
							<div style="margin-left: 3.6%;margin-top: 1%;height: auto;">
								<a-space :size="17" direction="vertical" fill>
									<a-typography v-for="(item,index) in seriesList.data" style="padding-bottom: 2%;">
										<a-typography-title :heading="6" style="font-weight: bold;margin-bottom: 2%;">
											{{item.sortTitle}}
										</a-typography-title>
										<a-typography-paragraph>
											<a-space wrap :size="70" align="start">
												<a-row style="margin-bottom: -25%;" justify="center"
													v-for="(content,index) in item.seriesContent">
													<a-col>
														<div
															style="width: 78px;height: 78px;">
															<img style="object-fit: contain;width: 100%;height: 100%;
															border: 1px solid darkgray;border-radius: 5px;"
																:src="content.logo" />
														</div>
													</a-col>
													<a-col>
														<a-typography
															style="margin-left:37%;width: 163px;margin-top: -39%;">
															<a-typography-title
																style="font-weight: bold;font-size: 15px;height: 21px;margin-bottom: 1%;"
																ellipsis
																>
																{{content.title}}
															</a-typography-title>
															<a-typography-paragraph
																style="font-size: 12px;color: gray;height: auto;"
																:ellipsis="{
																        rows: 3,
																        expandable: true,
																        showTooltip: {
																          props: {
																            style: { maxWidth: `500px` }
																          }
																        }
																      }">
																{{content.description}}
															</a-typography-paragraph>
														</a-typography>
													</a-col>
												</a-row>
											</a-space>
										</a-typography-paragraph>
										<a-button style="margin-left: 35vw;" @click="getMoreInfo"
										v-if="item.total - item.currentTotal > 8">
											加载更多
										</a-button>
										<a-button style="margin-left: 35vw;"
										v-else-if="item.total - item.currentTotal < 8 && item.total > 8"
										@click="reduceInfo">
											收起信息
										</a-button>
									</a-typography>
								</a-space>
							</div>
						</a-typography-title>
					</a-typography>
				</div>
			</a-layout-header>
			<a-layout-footer>
				<div id="footer">
					<a-layout-header id="footer-header">
						<a-divider />
					</a-layout-header>
				</div>
			</a-layout-footer>
		</div>
	</a-layout-header>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';

	import emojiComment from '@/components/modelDetail/emoji/emojiComment.vue';
	import indexApi from '@/module/modelDetail/api/index.js';
	import apiUrl from '@/constant/modelDetail/apiUrl.js';

	let {
		proxy
	} = getCurrentInstance();
	
	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();

	const emit = defineEmits(['getCartGoodStatus']);

	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;

	let seriesList = reactive({});

	let rate = ref(0);
	let tips = ref('');

	let currentUrl = ref('');

	let currentMenuItem = reactive(['1']);
	let typeMenuItem = reactive(['变形金刚', '海贼王', '圣斗士', '星战', '手办', '成品机甲', '科幻拼装', '特摄',
		'美系', '扭蛋', 'GK', '军模', '潮玩', '其他'
	]);

	let fillContent = ref(`<img width="800px" height="300px" src="${proxy.$index.imgUrl}split.png"
														title='11111111' /><img width="800px" height="300px" src="${proxy.$index.imgUrl}split.png"
																											title='11111111' /><img width="800px" height="300px" src="${proxy.$index.imgUrl}split.png"
																																								title='11111111' />
													<img width="800px" height="300px" src="${proxy.$index.imgUrl}split.png"
														title='11111111' />
													`);
	let fillOfficial = ref(`<p style="color:red">2222</p>`);

	let formatserieList = reactive({});
	let typeIdList = reactive({});

	async function loadingSeriesList() {
		seriesList.resp = await indexApi.getSeriesList(typeIdList.data);
		seriesList.data = seriesList.resp.data;
		seriesList.data.map((item,index)=>{
			item.total = item.seriesContent.length;
			item.contentArray = item.seriesContent;
			item.seriesContent = item.seriesContent.slice(0,8);
			item.currentTotal = 0;
			return item;
		});
		console.log('seriesList.resp', seriesList.resp);
		console.log('seriesList', seriesList.data);
		return seriesList;
	}
	
	async function loadingTypeId(){
		typeIdList.resp = await indexApi.getTypeId(route.params.id);
		typeIdList.data = typeIdList.resp.data;
		console.log('typeIdList',typeIdList.data);
		loadingSeriesList();
	}
	
	function getMoreInfo(){
		console.log('加载更多系列信息');
		seriesList.data.map((item,index)=>{
			item.currentTotal = item.currentTotal+8;
			item.typeContent = item.contentArray.slice(0,item.currentTotal)
			.concat(item.contentArray.slice(item.currentTotal,item.currentTotal+8));
		});
		console.log('seriesList', seriesList.data);
		return seriesList;
	}
	
	function reduceInfo(){
		console.log('收起系列信息');
		seriesList.data.map((item,index)=>{
			item.currentTotal = 0;
			item.typeContent = item.contentArray.slice(0,8);
		});
		console.log('seriesList', seriesList.data);
		return seriesList;
	}

	function like() {
		proxy.$message.success('点赞成功！');
	}

	function save() {
		proxy.$message.success('收藏成功！');
	}

	function scroller() {
		document.getElementById('footer').scrollIntoView({
			behavior: 'smooth'
		});
	}

	function valueChange(value) {
		console.log('value', value);
		if (value > 0 && value <= 1) {
			tips.value = '很差';
		} else if (value > 1 && value <= 2) {
			tips.value = '勉强';
		} else if (value > 2 && value <= 3) {
			tips.value = '还行';
		} else if (value > 3 && value <= 4) {
			tips.value = '精品';
		} else if (value > 4 && value <= 5) {
			tips.value = '完美';
		}
		console.log('tips', tips.value)
	}

	function getUrl() {
		currentUrl.value = window.location.href;
		console.log('url', currentUrl.value);
	}

	function getMenuItem(key) {
		console.log('keyItem', key.toString());
		if (currentMenuItem.length != 0) {
			currentMenuItem.splice(0, currentMenuItem.length);
		}
		currentMenuItem.push(key.toString());
		console.log('currentMenuItem', currentMenuItem);
	}

	onMounted(() => {
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		loadingTypeId();
		getUrl();
		console.log('env',
			import.meta.env);
		console.log('currentMenuItem', currentMenuItem);
	});
</script>

<style lang="less" scoped>
	@import '@/assets/modelDetail/css/series.less';
</style>
